<template>
  <div id="demo">
    <FilterTable
      :columns="columns"
      :tableData="tableData"
      @getTableData="getTableData"
      :total="total"
      :scrollY="400"
    ></FilterTable>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import FilterTable from '@/views/components/FilterTable.vue';

  interface TableColumns {
    title: string;
    dataIndex: string;
    key: string;
    customFilterDropdown?: boolean;
  }
  const columns = ref<TableColumns[]>([
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      customFilterDropdown: true,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
      customFilterDropdown: true,
    },
  ]);
  const tableData = ref([
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Joe Black',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Jim Green',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
    },
    {
      key: '4',
      name: 'Jim Red',
      age: 32,
      address: 'London No. 2 Lake Park',
    },
    {
      key: '4',
      name: 'Jim Red',
      age: 32,
      address: 'London No. 2 Lake Park',
    },
    {
      key: '4',
      name: 'Jim Red',
      age: 32,
      address: 'London No. 2 Lake Park',
    },
    {
      key: '4',
      name: 'Jim Red',
      age: 32,
      address: 'London No. 2 Lake Park',
    },
    {
      key: '4',
      name: 'Jim Red',
      age: 32,
      address: 'London No. 2 Lake Park',
    },
    {
      key: '4',
      name: 'Jim Red',
      age: 32,
      address: 'London No. 2 Lake Park',
    },
  ]);
  const total = ref<number>(100);
  const getTableData = (pag) => {
    console.log(pag, 'pag');
  };
</script>

<style lang="less" scoped>
  #demo {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 100px;
    box-sizing: border-box;
  }
</style>
